<template>

  <div>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg1">
          <div>
            <div class="card-panel-text">
              在线用户数
            </div>
            <count-to :start-val="0" :end-val="record.onlineNumber" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg2">
          <div>
            <div class="card-panel-text">
              今日用户登录次数
            </div>
            <count-to :start-val="0" :end-val="record.todayUserLoginNumber" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg2">
          <div>
            <div class="card-panel-text">
              今日新入客户数
            </div>
            <count-to :start-val="0" :end-val="record.todayNewCustomerNumber" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg3">
          <div>
            <div class="card-panel-text">
              接入代理数
            </div>
            <count-to :start-val="0" :end-val="record.companyNumber" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg6">
          <div>
            <div class="card-panel-text">
              今日业绩（元）
            </div>
            <count-to :start-val="0" :end-val="record.todayYeji" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg1-2">
          <div>
            <div class="card-panel-text">
              今日订单数
            </div>
            <count-to :start-val="0" :end-val="record.todayNewOrderNumber" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel-bg bg5">
          <div>
            <div class="card-panel-text">
              今日短信发送
            </div>
            <count-to :start-val="0" :end-val="record.todaySmsNumber" :duration="2000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  data() {
    return {
      record: {
        "pt": 20250415,
        "comId": "4664858152",
        "todayNewOrderNumber": 88,
        "todayNewCustomerNumber": 568,
        "todayVoiceSuccessNumber": 129,
        "todayVoiceNumber": 166,
        "todaySmsNumber": 356,
        "todaySmsSuccessNumber": 168,
        "todayYeji": 88888.88,
        "onlineNumber": 128,
        "todayNoticerNumber": 0,
        "companyNumber": 3,
        "todayUserLoginNumber": 1200
      },
      homeCountInfo: {}
    }
  },

  created() {

  },
  mounted() {
  },
  computed: {


    roleLevel() {

      return this.$store.state.user.level//0.普通 1 机构管理员 2 超级管理员
    },
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  background: #fff;
  padding: 18px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin: 0px !important;


  .card-panel-col {
    margin-bottom: 16px;
  }

  .bg1 {
    background: url("../../../public/static/image/index/pic1-1.png");
  }

  .bg1-2 {
    background: url("../../../public/static/image/index/pic1-2.png");

  }

  .bg1-3 {
    background: url("../../../public/static/image/index/pic1-3.png");

  }

  .bg2 {
    background: url("../../../public/static/image/index/pic2.png");
  }

  .bg3 {
    background: url("../../../public/static/image/index/pic3.png");
  }

  .bg4 {
    background: url("../../../public/static/image/index/pic4.png");
  }

  .bg5 {
    background: url("../../../public/static/image/index/pic5.png");
  }

  .bg6 {
    background: url("../../../public/static/image/index/pic6.png");
  }

  .bg7 {
    background: url("../../../public/static/image/index/pic7.png");
  }

  .card-panel-bg:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    transform: translate(0, -4px);
  }

  .card-panel-bg {
    width: 315px;
    height: 207px;
    background-size: cover;
    position: relative;
    transition: all .4s;

    .card-panel-text {
      position: absolute;
      /*float: left;*/
      left: 21px;
      top: 21px;
      color: #fff;
      font-size: 20px;
    }

    .card-panel-num {
      position: absolute;
      left: 21px;
      top: 66px;
      color: #fff;
      font-size: 36px;
    }
  }

  @media screen and (max-width: 1550px) and (min-width: 1300px) {
    .card-panel-bg {
      width: 250px;
      height: 164px;
    }
  }
  @media screen and (max-width: 1300px) and (min-width: 1200px) {
    .card-panel-bg {
      width: 230px;
      height: 150px;
    }
  }

}


.card-panel-icon-wrapper {
  float: none !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;

  .svg-icon {
    display: block;
    margin: 14px auto !important;
    float: none !important;
  }
}
</style>
